<%= javascript_include_tag "jquery.pagination","application" %>

<script type="text/javascript">
    /**
     * Callback function that displays the content.
     *
     * Gets called every time the user clicks on a pagination link.
     *
     * @param {int} page_index New Page index
     * @param {jQuery} jq the container with the pagination links as a jQuery object
     */
    function pageselectCallback(page_index, jq){
        var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
        $('#Searchresult').empty().append(new_content);
        return false;
    }
   
    /** 
     * Initialisation function for pagination
     */
    function initPagination() {
        // count entries inside the hidden content
        var num_entries = jQuery('#hiddenresult div.result').length;
        // Create content inside pagination element
        $("#Pagination").pagination(num_entries, {
            callback: pageselectCallback,
			num_display_entries:6,
			num_edge_entries:1,
            // Calculate the number of items to show dividing the actual number of items by items_per_page
			items_per_page:1
        });
     }
    
    // When document is ready, initialize pagination
    $(document).ready(function(){ 
        initPagination();
    });
</script>

<script>
	$(function() {
		$( "button, input:submit, a", ".demo" ).button();
		$( "a", ".demo" ).click(function() { return true; });
	});
</script>
	<style type="text/css">
		#datos{
			-moz-border-radius: 10px 10px 10px 10px;
			background: none repeat scroll 0 0 #FFFFFF;
			border: 1px solid #99CC00;
			}
	</style>
	
<h1>Descripcion del Itinerario</h1>
<div id="datos" style=" float:left; width: 90%;"></div>
<br>

<div>
	<div style="margin-left: 5%;"><h2><%= @trip.tri_country%> - <%= @trip.tri_city%></h2></div>
		<div style="float:left; margin-left: 5%; margin-top: 2%;">
		<%=image_tag(@itinerary.iti_image_url, :size => "200x200") %>
		
			<div style="margin-left: 5%; float: left; margin-top: 10%; text-align: center;">
				<% if (isOwner(@itinerary.trip_id) and (isAvailable(@itinerary.trip_id))) %>
					<%= link_to "Editar Itinerario", edit_itinerary_path(@itinerary) %>
				<% end-%>
			</div>
		
		</div>
		
		<div style="float:left; width: 51%;">
			<p>
				<b>Lugar de Destino: </b>
				<%=h @itinerary.iti_location %>
			</p>

			<p>
			  <b>Fecha Inicio: </b>
			  <%=h @itinerary.iti_start_date.strftime("%d-%m-%Y") %>
			</p>

			<p>
			  <b>Fecha Finalizacion:</b>
			  <%=h @itinerary.iti_end_date.strftime("%d-%m-%Y") %>
			</p>

			<p>
			  <b>Descripcion:</b>
			  <%=h @itinerary.iti_description %>
			</p>
			
			<p>
				<h4>Cantidad de Votos Actuales: <%=h@countVotes.count%></h4>
			</p>
			
				  <% realizoVoto=false %>
				  <% @votes.each do |vota|%>
						<% realizoVoto=true %>
				  <% end -%>
			
			<div style="width: 42%;">
				<% if (isAvailable(@itinerary.trip_id)) %>	
				  <% if (realizoVoto) %>
					<h5>Ya diste tu voto por este Itinerario!</h5>
				  <% else%>
							<h5>Vota por este Itinerario!</h5>
							<% form_for(@itinerary.vote.new) do |f| %>
								<%= f.error_messages %>
								<%= f.hidden_field(:itinerary_id, :value => @itinerary.id)%>
								<%= f.hidden_field(:user_id, :value => current_user.id) %>
								<%= f.submit "Votar!" %>
							<% end %>
				  <% end-%>
				<% end-%>
			</div>
		</div>
	</div>
	
<div>
	<div id="datos" style=" float:left; width: 90%; margin-top: 4%;"></div>
	<div style=" float:left; margin-top: 1%; margin-left:6%;">
	<h2>Comentarios (<%=h @comments.count%>)</h2>	
	</div>
	<br>

<div style="float:left; margin-top:7%; margin-left:-11%;">
    <div id="Pagination"></div>
    <br style="clear:both;" />
    <div id="Searchresult" class="contbox2">
        This content will be replaced when pagination inits.
    </div>
	
	<!-- Container element for all the Elements that are to be paginated -->
    <div id="hiddenresult" style="display:none;">
		<%contadorPaginacion=0%>
		<%cuentaTotal=0%>
		<%commentMax = 5%>
		<% if @comments.count > 0%>	
		
			<% @comments.each do |comentario|%>
			<%cuentaTotal= cuentaTotal + 1 %>
			<% if (contadorPaginacion==0) %>
				<div class="result">
			<% end-%>
			
				<div>
					<td>
							<tr>
								<%=image_tag(@user.picture, :size => "30x30") %>
							</tr>
							<tr>
								<td><b><%=h comentario.user.name + " " + comentario.user.name2 + "  dice:"%></b><br /></td>
								<td><tr>&nbsp</tr><tr>&nbsp</tr><tr>&nbsp</tr><%= comentario.body%></td>
							</tr>
					</td>
					<br />
				</div>
				<%contadorPaginacion = contadorPaginacion+1%>
			<% if (contadorPaginacion==commentMax or contadorPaginacion==@comments.count or cuentaTotal==@comments.count )%>
				 </div>
				 <%contadorPaginacion=0%>
			<%end-%>
			<% end -%>
		<% else%>
			<div class="result">
				<div style="text-align: center;">
					<h3>No se ha comentado este destino</h3>
				</div>
			</div>
		<% end%>
		</div>
	
		<br />
		<div id="hacerComentario" style="width: 42%;">
			<% if (isAvailable(@itinerary.trip_id)) %>
				<h5>Haz tu Comentario!</h5>
				<% form_for(@itinerary.comment.new) do |f| %>
					<%= f.error_messages %>
					<%= f.hidden_field(:itinerary_id, :value => @itinerary.id)%>
					<%= f.hidden_field(:user_id, :value => current_user.id) %>
					<td><%= f.text_area :body, :rows=>2,:cols=>40 %></td>
					<%= f.submit "Grabar" %>
				<% end %>
			<% end %>
		</div>
</div>
	<script src="http://maps.google.com/maps/api/js?v=3.1&sensor=false" type="text/javascript"></script>
		<div id="mapa" style="float:left; margin-top:50%; margin-top:1%;">
			<h2>Ubicacion</h2>
			<div id="map" style="width:400px; height:400px; margin-left: 5%; margin-top:7%;"></div>
		</div>
</div>

<div id="footer" class="demo" style="margin-top:90%;">
<% if (isOwner(@itinerary.trip_id) and (isAvailable(@itinerary.trip_id))) %>
<%= link_to "Editar", edit_itinerary_path(@itinerary) %>
<% end-%>
<%= link_to "Regresar", :controller => "trips", :action => "show", :id => @itinerary.trip_id %></div>
</div>
<input type="hidden" id="latitude" name="latitude" value="<%= @itinerary.iti_latitude %>">
<input type="hidden" id="longitude" name="longitude" value="<%= @itinerary.iti_longitude %>">
<input type="hidden" id="location" name="location" value="<%= @itinerary.iti_location %>">